<template>
    <div class="flex-box">
            <heads   :showBack="showBack"  :showStatus="true" :showTitle="collect" @submit="collectContent"></heads>

             <div  class="flex-item padding-auto" style="display: flex;flex-direction: column;height: 100%;">
            <scroller v-show="show" :lockX=true :scrollbar-y=false ref="scroller">
                <div >
                    <div><h2>{{title}}</h2></div>
                    <div style='padding: 5px 5px;height: 50px;display: flex;align-items: center'>
                        <span><img :src="head" width="30" height="30" /></span>
                        <span style="flex: 1;padding-left: 10px;">
                             <div style="font-size: 12px;"> {{resource}}</div>
                             <div style="font-size: 12px;"> {{datetime}}</div>
                        </span>
                        <span @click="attention" :class="{link_user:style_like_user,no_like_user:style_no_like_user}">{{like_user}}</span>
                    </div>
                    <span style="font-size: 20px;"  v-html="content">

                    </span>

                </div>
            </scroller>
        </div>
        <loading :show="show1" text=""></loading>
        <toast v-model="showPositionValue"  :time="1000"  width="14.6em" :type="type" is-show-mask :text="message" :position="position"></toast>
    </div>
</template>

<script>
    import heads from '../header';
    import {Scroller,Toast,Loading} from 'vux'
    export default {
        name: "contents",
        components:{
            heads,
            Scroller,
            Toast,
            Loading
        },
        computed:{
            user_state () {
                return this.$store.getters.user_state
            }

        },
        methods:{
            collectContent(){
                if(!this.user_state){
                    this.message='登录后收藏';
                    this.showPositionValue=true;
                    this.type='warn'
                }else {
                    var _this = this;
                    this.$axios.post(this.$axios.defaults.baseURL + 'collect', {
                        article_id:_this.id
                    }).then(function (res) {
                        if (res.data.state) {
                            _this.collectStatus();
                        }
                    }).catch(function (err) {
                        console.log(err)
                    })
                }
            },
            attention(){
                if(!this.user_state){
                    this.message='登录后关注';
                    this.showPositionValue=true;
                    this.type='warn'
                }else {
                    var _this = this;
                    this.$axios.post(this.$axios.defaults.baseURL + 'linkUser', {
                        link_user_id:_this.user_id
                    }).then(function (res) {
                        if (res.data.state) {
                            _this.linkUserStatus();

                        }else{
                            _this.message=res.data.msg;
                            _this.showPositionValue=true;
                            _this.type='warn'
                        }
                    }).catch(function (err) {
                        console.log(err)
                    })
                }
            },
            collectStatus(){

                    var _this = this;
                    this.$axios.get(this.$axios.defaults.baseURL + 'collectStatus', {
                        params: {
                            article_id: _this.id
                        }
                    }).then(function (res) {
                        if (res.data.state&&res.data.data!=null) {
                            if (res.data.data.status == 1) {
                                _this.collect = '已收藏'
                            }
                            else {
                                _this.collect = '未收藏'
                            }
                        }
                    }).catch(function (err) {
                        console.log(err)
                    })

            },
            linkUserStatus(){
                var _this=this;
                this.$axios.get(this.$axios.defaults.baseURL+'linkUserStatus',{
                    params:{
                        link_user_id:_this.user_id
                    }
                }).then(function (res) {
                    if(res.data.state&&res.data.data!=null){
                        if(res.data.data.status==1) {
                            _this.like_user = '已关注'
                            _this.style_like_user=true;
                            _this.style_no_like_user=false;
                        }else{
                            _this.like_user = '未关注'
                            _this.style_like_user=false;
                            _this.style_no_like_user=true;
                        }
                    }
                }).catch(function (err) {
                    console.log(err)
                })
            },
           geContent(){
               var _this=this;
               this.$axios.get(this.$axios.defaults.baseURL+'getArticleContent',{
                   params:{
                       id:_this.id
                   }
               }).then(function (res) {
                   if(res.data.state){
                       setTimeout(() => {

                           _this.title=res.data.data.title;
                           _this.resource=res.data.data.user.name;
                           _this.datetime=res.data.data.created_at;
                           _this.content =res.data.data.content
                           _this.user_id=res.data.data.user.id
                           _this.head=(res.data.data.user.thumb!=null)?res.data.data.user.thumb:_this.head
                           _this.show=true;
                           _this.$nextTick(() => {
                               _this.$refs.scroller.reset({top:0})
                           });
                           _this.linkUserStatus()
                       }, 100)

                       _this.show1=false;
                   }else {
                       _this.show1=false;
                   }
               }).catch(function (err) {
                   console.log(err)
               })

            }
        },
        data(){
          return {
              title:'',
              show: false,
              showBack:{
                  showBack:true
              },
              resource:'',
              datetime:'',
              content:'',
              collect:'未收藏',
              id:'',
              user_id:'',
              like_user:'未关注',
              showPositionValue:false,
              message:null,
              type:'success',
              position:'middle',
              style_like_user:true,
              style_no_like_user:false,
              head:'static/images/head.png',
              show1:true
          }
        },

        created(){
            this.title=null;
            this.resource=null;
            this.datetime=null;
            this.content=null;
            this.head='static/images/head.png',
            this.id=this.$route.query.id;
            this.geContent();
            this.collectStatus(0);

        },
        activated(){
            this.title=null;
            this.resource=null;
            this.datetime=null;
            this.content=null;
            this.head='static/images/head.png',
            this.id=this.$route.query.id;
            this.show1=true;
            this.geContent();
            this.collectStatus(0);

        }


    }
</script>

<style lang="less" scoped>
  @import "../../assets/css/comm.less";

  @media screen and (max-device-width: 667px) {
      .padding-auto {
          padding: 0px 7px;
      }
      .link_user{
          background: #ccc;font-size:12px;
          padding: 5px;height:16px;line-height: 16px;width: 40px;text-align: center;
          color: white;border-radius: 3px;
      }
      .no_like_user{

          background: red;font-size:12px;
          padding: 5px;height:16px;line-height: 16px;width: 40px;text-align: center;
          color: white;border-radius: 3px;
      }

  }
</style>